@import './color';

.kai-content{
  min-height:100vh;
  background: #f5f5f5;
  overflow: hidden;
  box-sizing: border-box;
}

.padding-5{
  padding:5px;
}

.padding-10{
  padding:10px;
}

.padding-15{
  padding:15px;
}

.padding-20{
  padding:20px;
}

.lighter {
  font-weight: lighter;
}

.fl {
  float: left;
}

.clearfix {
  zoom: 1;
  &:after {
    height: 0;
    overflow: hidden;
    display: block;
    content: '';
    clear: both;
  }
}

.btn{
  position: relative;
  color: #333;
  background-color: #fff;
  margin-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 45px;
  height: 45px;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  vertical-align: middle
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid #e5e5e5;
  border-width: 1px;
  border-radius: 4px
}

.btn-min{
  display: inline-block;
  line-height: 21px;
  height: 22px;
  font-size: 10px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px
}

.btn-small {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  margin-right: 5px;
}

.btn-large {
  border: none;
  line-height: 50px;
  height: 50px
}

.btn-success {
  color: #fff;
  background-color: @success
}

.btn-success::after {
  border-color: #0a0
}

.btn-warn {
  color: #fff;
  background-color: #f85
}

.btn-warn::after {
  border-color: #f85
}

.btn-kai{
  background-color: @kai;
  color:#fff;
}

.btn-warn::after {
  border-color: @kai
}

.btn-danger {
  color: #fff;
  background-color: #f44
}


.btn-danger::after {
  border-color: #e33
}

button[disabled][type="default"], wx-button[disabled]:not([type]) {
  color: #999 !important;
  background: #f7f7f7 !important;
  border-color: #e5e5e5 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  &::after{
    border-color: #e5e5e5
  }
}

.btn-empty{
  background-color: #fff;
  &.btn-success{
    color: @success;
    &::after{
      border-color: #0a0
    }
  }
  &.btn-warn{
    color: #f85;
    &::after{
      border-color: #f85
    }
  }
  &.btn-kai{
    color: @kai;
    &::after{
      border-color: @kai
    }
  }
  &.btn-danger{
    color: #e33;
    &::after{
      border-color: #e33
    }
  }
}

.btn-loading {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  .loading-content{
    margin-right: 5px;
  }
  &.btn-small {
    display: inline-block;
    .loading-content{
      display: inline-block;
      top: 5px;
    }
  }
}

@keyframes btn-spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

.layout {
  display: block;
  .col{
    display:inline-block;
    overflow: hidden;
  }

  .col-1{
    width: 4.16666667%;
  }
  .col-2{
    width: 8.33333333%;
  }
  .col-3{
    width: 12.5%;
  }
  .col-4{
    width: 16.66666667%;
  }
  .col-5{
    width: 20.83333333%;
  }
  .col-6{
    width: 25%;
  }
  .col-7{
    width: 29.16666667%;
  }
  .col-8{
    width: 33.33333333%;
  }
  .col-9{
    width: 37.5%;
  }
  .col-10{
    width: 41.66666667%;
  }
  .col-11{
    width: 45.83333333%;
  }
  .col-12{
    width: 50%;
  }
  .col-13{
    width: 54.16666667%;
  }
  .col-14{
    width: 58.33333333%;
  }
  .col-15{
    width: 62.5%;
  }
  .col-16{
    width: 66.66666667%;
  }
  .col-17{
    width: 70.83333333%;
  }
  .col-18{
    width: 75%;
  }
  .col-19{
    width: 79.16666667%;
  }
  .col-20{
    width: 83.33333333%;
  }
  .col-21{
    width: 87.5%;
  }
  .col-22{
    width: 91.66666667%;
  }
  .col-23{
    width: 95.83333333%;
  }
  .col-24{
    width: 100%;
  }

  .col-offset-1{
    margin-left: 4.16666667%;
  }
  .col-offset-2{
    margin-left: 8.33333333%;
  }
  .col-offset-3{
    margin-left: 12.5%;
  }
  .col-offset-4{
    margin-left: 16.66666667%;
  }
  .col-offset-5{
    margin-left: 20.83333333%;
  }
  .col-offset-6{
    margin-left: 25%;
  }
  .col-offset-7{
    margin-left: 29.16666667%;
  }
  .col-offset-8{
    margin-left: 33.33333333%;
  }
  .col-offset-9{
    margin-left: 37.5;
  }
  .col-offset-10{
    margin-left: 41.66666667%;
  }
  .col-offset-11{
    margin-left: 45.83333333%;
  }
  .col-offset-12{
    margin-left: 50%;
  }
  .col-offset-13{
    margin-left: 54.16666667%;
  }
  .col-offset-14{
    margin-left: 58.33333333%;
  }
  .col-offset-15{
    margin-left: 62.5%;
  }
  .col-offset-16{
    margin-left: 66.66666667%;
  }
  .col-offset-17{
    margin-left: 70.83333333%;
  }
  .col-offset-18{
    margin-left: 75%;
  }
  .col-offset-19{
    margin-left: 79.16666667%;
  }
  .col-offset-20{
    margin-left: 83.33333333%;
  }
  .col-offset-21{
    margin-left: 87.5%;
  }
  .col-offset-22{
    margin-left: 91.66666667%;
  }
  .col-offset-23{
    margin-left: 95.83333333%;
  }
}

.text-pull-left{
  text-align:left;
}
.text-align-center{
  text-align:center;
}
.text-pull-right{
  text-align:right;
}
.font-10{
  font-size:10px;
}
.font-12{
  font-size:12px;
}
.font-14{
  font-size:14px;
}
.font-16{
  font-size:16px;
}
.font-bold{
  font-weight:bold;
}
.color-red{
  color:#f40;
}
.color-gray{
  color:gray;
}
.color-title{
  color:#333;
}
.color-content{
  color: #999;
}
.color-kai{
  color:@kai;
}
.color-success{
  color: @success;
}
.color-blue{
  color:blue;
}

.ellipsis-l1{
  max-height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical
}

.ellipsis-l2{
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.ellipsis-l3{
  max-height: 60px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

.text-deleted {
  text-decoration: line-through
}


.popup {
  visibility: hidden
}

.popup-show {
  visibility: visible;
  z-index:1000;
}

.loadmore {
  position: relative;
  width: 65%;
  margin: 21px auto;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.loading {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url() no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%
}

.loadmore .loading {
  margin-right: 4px
}

.loadmore-tips {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  line-height: 20px
}

.loadmore-nodata, .loadmore-nomore {
  color: #999
}

.loadmore-nodata::after, .loadmore-nomore::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid #e5e5e5;
  border-top-width: 1px
}

.loadmore-nodata {
  margin-top: 120px
}

.loadmore-nodata .loadmore-tips {
  position: relative;
  top: -11px;
  background: transparent;
  padding: 0 6px;
  z-index: 1
}

.loadmore-nomore .loadmore-tips {
  position: relative;
  top: -11px;
  background: transparent;
  padding: 0 6px;
  z-index: 1
}

.loadmore-dot {
  position: absolute;
  left: 50%;
  top: 10px;
  margin-left: -2px;
  margin-top: -2px;
  content: " ";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #e5e5e5;
  display: inline-block;
  vertical-align: middle
}

.toptips {
  display: block;
  position: fixed;
  -webkit-transform: translateZ(0) translateY(-100%);
  width: 100%;
  min-height: 32px;
  top: 0;
  line-height: 2.3;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background-color: #e64340;
  z-index: 110;
  transition: all .4s ease
}

.toptips-show {
  -webkit-transform: translateZ(0) translateY(0)
}

.content-toast {
  position: fixed;
  top: 35%;
  left: 20%;
  transform: translateZ(0) translateY(-100%);
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 14px;
  width: 60%;
  line-height: 1.5em;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  z-index: 100
}


